<script language="JavaScript" src="/Scripts/jquery-1.2.6"></script>
<style type="text/css">@import "/Scripts/jquery.svg.css";</style> 
<script type="text/javascript" src="/Scripts/jquery.svg.js"></script>
<style>
<!--
body{
color:#aaa;
}
table tr td.picked {
background:url('bg_pick.png') center center no-repeat
}
table tr td.picked2 {
background:url('bg_hov.png') center center no-repeat
}
table tr td{
position:relative;border:0px solid #999;border-collapse:collapse;height:25px;width:25px;padding:0px;text-align:center;vertical-align:middle;background:url(bg.png) center center no-repeat;
}
-->
</style>
<script type="text/javascript">
<!--
var i=0;
$(function(){
                $('td').mouseover(function(){
                        $(this).css("background","url(bg_p.png) center center no-repeat");
                });
                $('td').mouseout(function(){
                        $(this).css("background","url(bg.png) center center no-repeat");
                });     
                $('td').click(function(){
					//console.log(this.id);
            
                if(i==0){
                        $(this).addClass('red');
                        $(this).removeClass('blue');
                        $('#turn').html('turn: blue');
                        $('#turn').addClass('blue');
                        turn='red';
                        opp='blue';
                        $('#turn').removeClass('red');                        
                        $(this).html('<img src="bg_pick.png" border="0" >');                     
                         
                        i=1;
                }else{
                        $(this).addClass('blue');
                        $(this).removeClass('red');
                        turn='blue';
                        opp='red';
                        $('#turn').addClass('red');
                        $('#turn').removeClass('blue');
                        $('#turn').html('turn: red');
                        $(this).html('<img src="bg_hov.png" border="0" >');
                                                            
                        i=0;
                }                   
                 checkLib(this.id,this.className,turn,opp);    
                ////console.log(this.id);
                return true;
           });                  
        });
        
				function checkLib(curr,className,turn,opp){
                        
                     //console.log('class check: '+ className,' current: '+ curr);
						tmp = curr.split('_');
						//console.log(tmp,turn,opp);
						checkSpace(tmp,turn,opp);
					}       
					function checkSpace(tmp,turn,opp){
					console.log(tmp,turn,opp);
						$(function(){
							/* Define adjacent spaces */
							B = (tmp[0]) + '_' + (parseInt(tmp[1])+ 1);
							R = (parseInt(tmp[0])+ 1) + '_' + (parseInt(tmp[1]));
							T = (tmp[0]) + '_' + (parseInt(tmp[1])- 1);
							L = (parseInt(tmp[0])- 1) + '_' + (parseInt(tmp[1]));
							html=(turn=='red')?'<img src="bg_pick.png" border="0" >':'<img src="bg_hov.png" border="0" >';													
							
							console.log('T-'+ T + ' class = ' , $('#'+T).className);
														
							if($('#'+T).hasClass(opp)){
								new_c=T;
								tmp = T.split('_');
								/* Define adjacent spaces */
								B = (tmp[0]) + '_' + (parseInt(tmp[1])+ 1);
								R = (parseInt(tmp[0])+ 1) + '_' + (parseInt(tmp[1]));
								T = (tmp[0]) + '_' + (parseInt(tmp[1])- 1);
								L = (parseInt(tmp[0])- 1) + '_' + (parseInt(tmp[1]));
								if($('#'+T).hasClass(turn)&&$('#'+R).hasClass(turn)&&$('#'+L).hasClass(turn)&&$('#'+B).hasClass(turn)){
							 		$('#'+new_c).addClass(opp);
                                	$('#'+new_c).removeClass(turn);                                
                       			 	$('#'+new_c).html(html);}							 	
							}	
							
							if($('#'+B).hasClass(opp)){
								new_c=B;
								tmp = B.split('_');
								/* Define adjacent spaces */
								B = (tmp[0]) + '_' + (parseInt(tmp[1])+ 1);
								R = (parseInt(tmp[0])+ 1) + '_' + (parseInt(tmp[1]));
								T = (tmp[0]) + '_' + (parseInt(tmp[1])- 1);
								L = (parseInt(tmp[0])- 1) + '_' + (parseInt(tmp[1]));
								if($('#'+T).hasClass(turn)&&$('#'+R).hasClass(turn)&&$('#'+L).hasClass(turn)&&$('#'+B).hasClass(turn)){
							 		$('#'+new_c).addClass(opp);
                                	$('#'+new_c).removeClass(turn);                                
                       			 	$('#'+new_c).html(html);}							 	
							}										
							
							if($('#'+R).hasClass(opp)){
								new_c=R;
								tmp = R.split('_');
								/* Define adjacent spaces */
								B = (tmp[0]) + '_' + (parseInt(tmp[1])+ 1);
								R = (parseInt(tmp[0])+ 1) + '_' + (parseInt(tmp[1]));
								T = (tmp[0]) + '_' + (parseInt(tmp[1])- 1);
								L = (parseInt(tmp[0])- 1) + '_' + (parseInt(tmp[1]));
								if($('#'+T).hasClass(turn)&&$('#'+R).hasClass(turn)&&$('#'+L).hasClass(turn)&&$('#'+B).hasClass(turn)){
							 		$('#'+new_c).addClass(opp);
                                	$('#'+new_c).removeClass(turn);                                
                       			 	$('#'+new_c).html(html);}							 	
							}		
							
							if($('#'+L).hasClass(opp)){
								new_c=L;
								tmp = L.split('_');
								/* Define adjacent spaces */
								B = (tmp[0]) + '_' + (parseInt(tmp[1])+ 1);
								R = (parseInt(tmp[0])+ 1) + '_' + (parseInt(tmp[1]));
								T = (tmp[0]) + '_' + (parseInt(tmp[1])- 1);
								L = (parseInt(tmp[0])- 1) + '_' + (parseInt(tmp[1]));
								if($('#'+T).hasClass(turn)&&$('#'+R).hasClass(turn)&&$('#'+L).hasClass(turn)&&$('#'+B).hasClass(turn)){
							 		$('#'+new_c).addClass(opp);
                                	$('#'+new_c).removeClass(turn);                                
                       			 	$('#'+new_c).html(html);}							 	
							}													
														
						//console.log('T-'+T+':R-'+R+':B-'+B+':L-'+L);
                        }); 
					}     
/* 
        if id = +1,-1,sqrt($x),-(sqrt($x)) check for ownership
*/                      
//-->
</script>
<div id="turn">turn: red</div>
<table border="0px" style="border:1px solid #000;border-collapse:collapse;">     
                <?php
                $i=0;
                $a=0;
                $y=20;
                $x=20;
                for($i==0;$i<=$y;$i++){                     
                   echo '<tr>';                        
                    for($a==0;$a<=$x;$a++){
                   		echo '<td id="'.$a.'_'.$i.'"></td>';                   
                    } 
                    $a=0;                       	
                	echo '</tr>';
                }
                ?>      
</table>
<div id="svgintro"> </div>
